<template name="home">
  <!-- 用户个人信息 -->
  <div class="col mb-3">
    <div class="profile-content">
      <!-- 编辑用户头像 -->
      {{> home_upload_avatar}}
      <!-- 显示基本信息 -->
      <div class="listview pl-4">
        <div class="list-item align-items-center">
          <h3>
            {{currentDisplayName}}
          </h3>
          {{#if currentUserSex}}
            <div class="user-sex-img mb-2 {{translateSex currentUserSex}}">
              <img class="mx-auto d-block" src="/img/png/{{translateSex currentUserSex}}.png" width="18">
            </div>
          {{/if}}
          <a class="link-normal link-user-page ml-auto hide-sm" href="/u/{{currentUserName}}">个人主页
            <i class="material-icons">navigate_next</i>
          </a>
        </div>
        <hr class="mt-2 show-sm" />
        <!-- text-truncate -->
        <div class="list-item list-item-normal text-secondary">
          <span class="border-right pr-2 mr-2">@{{currentUserName}}</span>
          <span class="border-right pr-2 mr-2">频道：0</span>
          <span>好友：0</span>
        </div>
        <!-- 显示更多信息 -->
        <div class="collapse" id="profileCollapse">
          <div class="col-lg-9 p-0">
            <dl class="row mb-0">
              {{#if currentUserProfile "birth"}}
                <dt class="col-md-3">出生日期</dt>
                <dd class="col-md-9 text-secondary">
                  <i class="material-icons mr-2">cake</i>
                  {{currentUserProfile "birth"}}
                </dd>
              {{/if}}
              {{#if currentUserProfile "notes"}}
                <dt class="col-md-3">个性签名</dt>
                <dd class="col-md-9 text-secondary">
                  {{currentUserProfile "notes"}}
                </dd>
              {{/if}}
            </dl>
          </div>
        </div>
        <div class="list-item">
          <a class="link-normal text-secondary" id="profileCollapseLink" data-toggle="collapse" href="#profileCollapse" role="button">
            <i class="material-icons mr-1" id="profileCollapseLinkIcon">expand_more</i>查看详细信息
          </a>
        </div>
        <a class="btn btn-outline-secondary btn-block profile-link-sm mt-3" href="#">个人主页</a>
      </div>
    </div>
  </div>
  <!-- 用户账号设置 -->
  <div class="col">
    <div class="account-content">
      <!-- 模块标题 -->
      {{> home_content_title title='账号设置'}}
      <!-- 模块内容 -->
      <div class="row px-3 py-3">
        {{> home_account_link
          href="/i/reset"
          icon="lock"
          title="修改密码"
          subtitle="定期修改密码以保证账号安全"
        }}
        {{> home_account_link
          href="/i/profile"
          icon="person"
          title="编辑个人信息"
          subtitle="让大家更了解你"
        }}
        <!-- phone_iphone 绑定手机 未绑定 -->
      </div>
    </div>
  </div>
</template>

<template name="home_account_link">
  <a href="{{href}}" class="account-link col-lg-6 px-0">
    <div class="left-icon">
      <i class="material-icons">{{icon}}</i>
    </div>
    <div class="mr-auto">
      <p class="m-0">{{title}}</p>
      <p class="m-0 text-secondary">{{subtitle}}</p>
    </div>
    <div class="right-icon">
      <i class="material-icons">navigate_next</i>
    </div>
  </a>
</template>